<template>
	<view class="content padding_top" v-if="pageShow">
		<view class="padding ffffff word_wrap">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="image_ya" style="margin-right: 20rpx;">
						<image :src="invitationInfo.user.avatar" mode="widthFix"></image>
					</view>
					<view>
						<view class="text_g color_ling">{{invitationInfo.user.nickname}}</view>
						<view class="year text_a  color_jiu">{{invitationInfo.createtime_text}}</view>
					</view>
				</view>
			</view>
			<view class="flexbetween margin_top2" v-if="type==2">
				<view class="reward">
					标金：{{invitationInfo.price}}元
				</view>
				<view class="text_a  color_jiu">截止时间：{{invitationInfo.expiretime_text}}</view>
			</view>
			<view class="videoName margin_top">
				{{invitationInfo.title}}
			</view>
			<view class="margin_top2 text_w color_ling" style="font-weight: 400;">
				{{invitationInfo.description}}
			</view>
			<view class="flexleft flex_wrap">
				<view class="forumBox margin_top" v-for="(item,index) in invitationInfo.images_arr" :key="index"
					@click.stop="lbtpriview(index,invitationInfo.images_arr,2)">
					<image :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="section margin_top flex1" v-if="type==2&&invitationCommList.data.length">
			<template>
				<view class="comment">回答 ({{invitationCommList.data.length}})</view>
				<view class="flexstart aside" style="padding: 30rpx 0;" v-for="item in invitationCommList.data"
					:key="item.id" @click="plTr(item)">
					<view style="margin-right: 20rpx;">
						<view class="image_ya">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
					</view>
					<view class="flex1">
						<view class="text_g color_ling">{{item.user.nickname}}</view>
						<view class="pinglunqu  text_f color_san">
							{{item.content}}
						</view>
						<view class="flexbetween margin_top2">
							<view class="text_a  color_jiu">{{item.createtime_text}}</view>
							<view class="reward" v-if="type==2 && item.state==2">
								赏金：{{item.give_money}}元
							</view>
							<view class="disagree" v-if="type==2 && item.state==3">
								不同意此观点
							</view>
						</view>
						<!-- 子评论 -->
						<!-- <view class="flexstart aside margin_top" style="border-bottom: none;" v-for="value in item.children" :key="value.id">
							<view style="margin-right: 20rpx;">
								<view class="image_ya">
									<image :src="value.replyuser.avatar" mode="widthFix"></image>
								</view>
							</view>
							<view class="flex1">
								<view class="text_g color_ling">{{value.replyuser.nickname}}</view>
								<view class="pinglunqu  text_f color_san">{{value.content}}</view>
								<view class="flexbetween margin_top2">
									<view class="text_a  color_jiu">{{value.createtime_text}}</view>
									<view class="reward" v-if="type==2">
										赏金：{{value.give_money}}元
									</view>
									<view class="disagree">
										不同意此观点
									</view>
								</view>
							</view>
						</view> -->
					</view>
				</view>
			</template>
		</view>
		<!-- footer -->
		<view class="footer flexbetween">
			<view class="flexbetween">
				<view class="flexcolumn margin_right1" @click.stop="goShare(invitationInfo)">
					<!-- <button open-type="share" class="footer_stars"> -->
					<!-- <view class="share" style="margin-top: 14rpx;">分享</view> -->
					<image class="imgForward" src="/static/image/home/forward_black.png" mode="widthFix"></image>
					<view class="share" style="margin-top: 18rpx;">转发</view>
					<!-- </button> -->
				</view>
				<view class="flexcolumn praise margin_right1" style="position: relative;">
					<!-- 未点赞 -->
					<image class="imgLike" src="/static/image/home/like_black.png" mode=""
						v-show="!invitationInfo.is_like" @click="like"></image>
					<!-- 已点赞 -->
					<image class="imgLike" src="/static/image/home/like-fill.png" mode=""
						v-show="invitationInfo.is_like" @click="like"></image>
					<view class="zan_num">{{invitationInfo.like_num}}</view>
					<view class="share" style="margin-top: 15rpx;">{{invitationInfo.is_like?'已点赞':'点赞'}}</view>
				</view>
				<view class="flexcolumn praise" style="position: relative;">
					<!-- 未收藏 -->
					<image class="imgStar" src="/static/image/home/star_black.png" mode=""
						v-show="!invitationInfo.is_collect" @click="collect"></image>
					<!-- 已收藏 -->
					<image class="imgStar" src="/static/image/home/star-fill.png" mode=""
						v-show="invitationInfo.is_collect" @click="collect"></image>
					<view class="zan_num">{{invitationInfo.collect_num}}</view>
					<view class="share" style="margin-top: 11rpx;">{{invitationInfo.is_collect?'已收藏':'收藏'}}</view>
				</view>
			</view>
			<view class="sousuobox flexleft" v-if="type==2">
				<input :focus="tipFocus" class="inputs" type="text" placeholder="善言结善缘"
					placeholder-class="color: rgba(197, 197, 197, 1);" v-model="content"
					@blur="setHfMsg(hfMsg.pid,hfMsg.reple_user_id)" @confirm="sendComm">
				<view class="margin_right2 send" @click="sendComm">发送</view>
			</view>
		</view>
		<u-popup :show="shareShow" round="20" mode="center" @close="shareShow=false">
			<view class="popupBoxShare">
				<view class="flexbetween">
					<view class="text margin_right7" @click="wxShareFriends">
						<image class="imgBox" src="/static/image/home/weixin.png" mode="widthFix"></image>
						<view class="text_b color_ling margin_top2">微信好友</view>
					</view>
					<view class="text">
						<image class="imgBox" src="/static/image/home/QQ.png" mode="" @click="qqShareFriends">
						</image>
						<view class="text_b color_ling margin_top2">QQ好友</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shareShow:false,
				tipFocus: false,
				list3: [],
				page: 1,
				limit: 12,
				invitationId: "", //论坛、打赏id
				invitationInfo: {
					user: {
						avatar: ""
					}
				}, //论坛、打赏详情
				invitationCommList: { //评论列表
					data: []
				},
				content: "", //评论内容`
				hfMsg: {
					invitation_comment_id: "",
					reple_user_id: ""
				},
				type: 0, //1论坛详情2打赏抢答详情
				pageShow: false,
				shareInfo: {}, //分享信息
				forumType:0,//类型
			}
		},
		onLoad(options) {
			this.invitationId = options.id
			this.type = options.type
			this.forumType = options.type
			console.log(options)
			this.getInvitationInfo()
			this.getInvitationCommList()
		},
		methods: {
			getInvitationInfo() { //论坛、打赏详情
				let _this = this
				httpRequest.request('/api/community/getdetail', 'GET', {
					id: _this.invitationId,
				}).then(res => {
					if (res.code == 1) {
						this.invitationInfo = res.data
						this.pageShow = true
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getInvitationCommList(isPage, page) { //评论列表
				let _this = this
				httpRequest.request('/api/community/getcommentlist', 'GET', {
					page: page || 1,
					// limit: _this.limit,
					community_id: _this.invitationId,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.invitationCommList;
						if (isPage == true) {
							_this.invitationCommList.data = dataList.data.concat(resList.data);
						} else {
							this.invitationCommList = res.data
							_this.invitationCommList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// onShareAppMessage() {
			// 	return {
			// 		title: this.invitationInfo.title,
			// 		path: "pages_post/tiezixq?id=" + this.invitationId + "&rec_uid=" + uni.getStorageSync(
			// 			"user_id"),
			// 	}
			// },
			onReachBottom() {
				let _this = this;
				let list = _this.invitationCommList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getInvitationCommList(true, page);
			},
			like() { //点赞、取消点赞
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/community/likes', 'GET', {
					community_id: _this.invitationInfo.id,
				}).then(res => {
					if (res.code == 1) {
						this.getInvitationInfo()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			collect() { //收藏、取消收藏
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/community/collects', 'GET', {
					community_id: _this.invitationInfo.id,
				}).then(res => {
					if (res.code == 1) {
						this.getInvitationInfo()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 评论他人
			plTr(item) {
				return false
				this.setHfMsg(item.id, item.re_user_id)
				this.tipFocus = true
			},
			setHfMsg(val1, val2) {
				this.hfMsg = {
					pid: val1,
					reple_user_id: val2
				}
				if (val1 == "") {
					this.tipFocus = false
				}
			},
			sendComm() { //评论
				let _this = this
				this.tipFocus = false
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				if (_this.content == "") {
					return false
				}
				httpRequest.request('/api/community/addcomment', 'GET', {
					community_id: _this.invitationInfo.id,
					content: _this.content,
					pid: _this.hfMsg.pid
					// invitation_comment_id: this.hfMsg.invitation_comment_id,
					// reple_user_id: this.hfMsg.reple_user_id
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						_this.content = ""
						this.getInvitationCommList()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				this.setHfMsg("", "")
			},
			lbtpriview(index, value, type) {
				let i; //获取当前页面的轮播图数据
				if (type == 1) {
					i = [value]
				} else {
					i = value
				}
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop: true, //循环预览只在APP生效
				})
			},
			goShare(item) { //转发
				this.shareShow = true
				this.shareInfo = item
			},
			addShare(community_id) { //增加转发量
				console.log("调用了！！！")
				let _this = this;
				httpRequest.request('/api/community/shares', 'POST', {
					community_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast("分享成功！");
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			wxShareFriends() { //微信分享
				let _this = this
				let shareInfo = _this.shareInfo
				uni.share({
					provider: "weixin",
					type: 0,
					title: shareInfo.title || "",
					href: `https://hongnwh.yuntaiqikeji.com/h5/#/?id=${shareInfo.id}&type=${_this.forumType}`,
					scene: "WXSceneSession",
					summary: shareInfo.description || "",
					imageUrl: "https://hongnwh-1318979827.cos.ap-shanghai.myqcloud.com/uploads/20230803/49aef582328737659ba0ef126c7de37a.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						_this.addShare(shareInfo.id)
						_this.shareShow = false
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			qqShareFriends() { //QQ分享
				let _this = this
				let shareInfo = _this.shareInfo
				let url = `https://hongnwh.yuntaiqikeji.com/h5/#/?id=${shareInfo.id}`
				uni.share({
					provider: "qq",
					type: 1,
					title: shareInfo.title || "",
					href: url,
					summary: shareInfo.description || "",
					// imageUrl:"www.wanxiangshide.xyz/uploads/20230722/68c2959eb3a63faff5248380f80bc5c1.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						_this.addShare(shareInfo.id)
						_this.shareShow = false
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FAFAFA;
		padding-top: 30rpx;
	}

	button::after {
		border: none;
	}

	button {
		padding: 0;
		border-radius: 0;
		background-color: #fff;
		line-height: 40rpx;
	}

	.imgForward {
		width: 26rpx;
		height: 26rpx;
		display: block;
	}

	.imgLike {
		width: 35rpx;
		height: 35rpx;
		display: block;
	}

	.imgStar {
		width: 38.88rpx;
		height: 38.88rpx;
		display: block;
	}

	// .reward {
	// 	width: 144rpx;
	// 	box-sizing: border-box;
	// 	background: rgba(243, 39, 28, .1);
	// 	border-radius: 8rpx 8rpx 8rpx 8rpx;
	// 	padding: 5rpx 15rpx;
	// 	font-size: 22rpx;
	// 	font-family: PingFang SC-Medium, PingFang SC;
	// 	font-weight: 500;
	// 	color: #F3271C;
	// }
	.disagree {
		width: 155rpx;
		height: 39rpx;
		line-height: 39rpx;
		text-align: center;
		background: rgba(75, 75, 75, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #4B4B4B;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

	}

	.zan_num {
		position: absolute;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
		bottom: 70rpx;
		left: 60rpx;
	}

	.praise {
		min-width: 80rpx;
		// margin-left: 20rpx;
	}

	.share {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.send {
		width: 122rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		margin-left: 10rpx;
		background: rgba(243, 39, 28, 1);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.sousuobox {
		width: 415rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #F3F3F3;
		// padding: 8rpx 8rpx 8rpx 20rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
		border-radius: 60rpx;
		margin-left: 30rpx;
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		background-color: #ffff;
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.aside {
		// padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(232, 232, 232, 1);
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.comment {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.ya {
		padding: 34rpx 19rpx 0rpx 30rpx;
	}

	.pinglunqu {
		padding-top: 5rpx;
	}

	.year {
		padding-top: 17rpx;
	}

	.section {
		background-color: #fff;
		padding: 38rpx 30rpx 250rpx 30rpx;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nav {
		padding: 45rpx 30rpx 23rpx 30rpx;
		border-bottom: 1rpx solid RGBA(232, 232, 232, 1);
	}

	.reward {
		min-width: 144rpx;
		box-sizing: border-box;
		background: rgba(243, 39, 28, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 5rpx 15rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.videoName {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin-bottom: 30rpx;
	}

	.forumBox {
		width: 33.3%;
		height: 194rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;

		// margin-right: 40rpx;
		image {
			width: 193rpx;
			height: 100%;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
		}
	}

	.popupBoxShare {
		padding: 100rpx 100rpx;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}

		.imgBox {
			width: 112rpx;
			height: 112rpx;
		}
	}
</style>